@border-color: #efefef;

:host {
  width: 300px;
  flex: 0 0 300px;
  background-color: white;
  border-right: 1px solid @border-color;
}

.sider {
  ul {
    border-right: none;
    overflow-y: auto;
    max-height: 83%;

    li {
      width: 100%;
    }

    a.active {
      font-weight: bold;
    }

    .section {
      position: relative;

      .nav-text {
        font-size: 15px;

        .icon {
          width: 23px;
          height: 23px;
          display: inline-block;
          vertical-align: middle;
          margin-right: 9px;
          text-align: center;
        }

        i.emoji {
          height: 23px;
          width: 23px;
          display: inline-block;
          font-style: normal;
          font-size: large;
          margin-right: 9px;
          text-align: center;
        }

        span {
          vertical-align: baseline;
        }
      }

      .nav-number {
        position: absolute;
        right: 0;
        top: 2px;
      }
    }
  }

  .newList {
    height: 42px;
    line-height: 42px;
    padding: 0 16px;
    cursor: pointer;

    span {
      font-size: 15px;
      color: #108ee9;

      i {
        color: #49a9ee;
        font-size: 17px;
        margin: 0 11px 0 3px;
      }
    }

    &:hover {
      background-color: whitesmoke;
    }
  }
}

